<template>

	<view style="padding-bottom: 80rpx;">
		<u-navbar class="avatar" :border-bottom="false" :background="background" :is-back="false" title=" ">
		</u-navbar>
		<view class="user">
			<view class="header" @click="edit">
				<view class="left">
					<view class="avatar">
						<!-- :show-level="true" level-icon="/static/aidex/images/vip3.png" -->
						<u-avatar size="122" :src="info && info.avatar "></u-avatar>
					</view>
					<view v-if="vuex_srls_token" class="names">
						<view class="name">
							{{(info && info.nickname) || ''}}
						</view>

						<view v-if="info">
							<view class="level">
								<image src="/static/aidex/images/vip3.png" mode=""></image>
								{{info.level_name}}
							</view>
						</view>
					</view>
					<view v-else class="names">
						<view class="name">
							暂未登录
						</view>

						<view>
							<view class="level" @click="login">
								去登录
							</view>
						</view>
					</view>
				</view>
				<view class="home">
					<!-- 主页 -->
					<u-icon class="icon" name="arrow-right" color="#A3A9B9" size="24"></u-icon>
				</view>
			</view>
			<view class="navs" v-if="info && info.isvip">
				<view class="left">
					<view class="top">
						<view class="logo">
							<image class="img1" src="/static/aidex/images/vip2.png" mode=""></image>

							<text>会员免费专享多重服务</text>

						</view>


					</view>
					<view class="bot">
						有效期至{{info.enddate}}
					</view>
				</view>
				<view class="">
					<view class="btn" @click="navTo('join')">
						立即续费
					</view>
				</view>
			</view>
			<view class="navs" v-else>
				<view class="left">
					<view class="top">
						<view class="logo">
							<image class="img1" src="/static/aidex/images/vip2.png" mode=""></image>
							<text>年卡</text>
							<image class="img2" src="/static/aidex/images/VIP0.png" mode=""></image>
						</view>

						<view class="desc">
							每天仅需1元
						</view>
					</view>
					<view class="bot">
						一年内无限次免费咨询
					</view>
				</view>
				<view class="">
					<view v-if="vuex_srls_token" class="btn" @click="navTo('join')">
						立即开通
					</view>
					<view v-else class="btn" @click="login">
						去登录
					</view>

				</view>
			</view>


		</view>
		<view class="cacu">
			<view class="tit">
				我的钱包
			</view>
			<view class="list1">

				<!-- pages/sys/user/cashDetail -->
				<view @click="detail('cashDetail',1)" class="item">
					<view class="name">

						{{(walletinfo && walletinfo.walletmoney) || 0.00}}
					</view>
					<view class="num">

						总收益 (元)
					</view>
				</view>

				<view @click="detail('',2)" class="item">
					<view class="name">

						{{(walletinfo && walletinfo.withdrawalmoney) || 0.00}}
					</view>
					<view class="num">
						可提现(元)
					</view>
				</view>
			</view>
		</view>


		<view class="personal">
			<view class="tit">
				其他服务
			</view>
			<view>
				<view class="personal-list">
					<view @click="navTo('order')" class="item">
						<view class="left">
							<image class="icon" src="/static/aidex/images/b2.png" mode=""></image>
							<view class="name">
								我的订单
							</view>
						</view>
						<image class="narrow" src="/static/aidex/images/back.png" mode=""></image>
					</view>
					<view @click="navTo('share')" class="item">
						<view class="left">
							<image class="icon" src="/static/aidex/images/b4.png" mode=""></image>
							<view class="name">
								海报邀请
							</view>
						</view>
						<image class="narrow" src="/static/aidex/images/back.png" mode=""></image>
					</view>
					<view @click="navTo('team')" class="item">
						<view class="left">
							<image class="icon" src="/static/aidex/images/b3.png" mode=""></image>
							<view class="name">
								我的团队
							</view>
						</view>
						<image class="narrow" src="/static/aidex/images/back.png" mode=""></image>
					</view>
					<view @click="navTo('about','dif')" class="item">
						<view class="left">
							<image class="icon" src="/static/aidex/images/b1.png" mode=""></image>
							<view class="name">
								关于我们
							</view>
						</view>
						<image class="narrow" src="/static/aidex/images/back.png" mode=""></image>
					</view>
					<view class="item" style="position: relative;">
						<button class="btns2" open-type="contact"></button>
						<view class="left">
							<image class="icon" src="/static/aidex/images/b5.png" mode=""></image>
							<view class="name">
								联系客服

							</view>
						</view>
						<image class="narrow" src="/static/aidex/images/back.png" mode=""></image>
					</view>
				</view>

			</view>
		</view>
		<!-- 获取手机号 -->
		<view v-if="(!(info && info.mobile) && vuex_srls_token) && sendDate" class="getPhone">
			<text>授权手机号登录，获取更多独家权益</text>
			<view class="butgroup">
				<button class="button" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">立即授权</button>
			</view>
		</view>
		<!-- 提现 -->
		<u-popup border-radius="14" z-index="888" :mask-close-able="true" width="80%" mode="center" v-model="show">
			<view class="content">
				<view class="img">
					<image @click="show = false" class="close" src="/static/aidex/images/close.png" mode=""></image>
				</view>
				<!-- <view class="title">
					请您确认打款账户信息
				</view> -->
				<view class="main">
					<view class="subtit">
						<image class="wx" src="/static/aidex/images/wx2.png" mode=""></image>
						可提现金额
					</view>
					<view class="money">
						<text>￥</text>
						{{(walletinfo && walletinfo.withdrawalmoney) || 0.00}}
					</view>
					<!-- <view class="desc">
						<view class="">
							打款账户
						</view>
						<view class="line">
							<image src="static/aidex/images/b6.png" mode=""></image>
							<view class="real">
								{{(info && info.nickname) || ''}}
							</view>
						</view>
					</view> -->
					<view class="desc">
						<view class="">
							打款方式
						</view>
						<view style="color: #3ec068;">
							微信零钱
						</view>
					</view>
					<view class="desc">
						<view style="width: 100%;">
							<u-input :password-icon="false" :clearable="false" :border="true" placeholder="请输入真实姓名 "
								border-color="#f5f1ed" v-model="realName" type="text" />
						</view>

					</view>

					<view class="desc">
						<view style="width: 100%;">
							<u-input @blur="validateInput" :password-icon="false" :clearable="false" :border="true"
								placeholder="请输入需提现金额 " border-color="#f5f1ed" v-model="psw" type="number" />
						</view>

					</view>


					<view @click="sure" class="btn">
						确认
					</view>
					<view class="tips" @click="record">
						提现记录
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				sendDate:false,
				realName: '',
				psw: '',
				show: false,
				walletinfo: null,
				info: null,
				iconSize: 38,
				background: {
					backgroundImage: "linear-gradient( 180deg, #CBECD5 0%, #d8f0df 100%)",
				},
			};
		},
		computed: {

			avatarUrl() {
				// let url = this.vuex_user.avatarUrl || '/ctxPath/static/images/user1.jpg';
				// url = url.replace('/ctxPath/', this.vuex_config.baseUrl + '/');
				let url = this.vuex_config.baseUrl + this.vuex_user.avatar || '/static/lawyer/tabbar/my_2.png';
				url = this.replaceAll(url, '\\', '/');
				return url + '?t=' + new Date().getTime();
			}
		},
		onShow() {
			if (this.vuex_srls_token) {
				this.getuserinfo()
				this.getusercenter()
			}

		},
		methods: {
			edit(){
				if(this.vuex_srls_token){
					uni.navigateTo({
						url:"/pages/sys/user/edit"
					})
				}
			},
			// pages/sys/user/edit
			
			record(){
				uni.navigateTo({
					url:"/pages/sys/user/record"
				})
			},
			validateInput() {
				const value = this.psw;
				const regex = /^\d+(\.\d{1,2})?$/;
				if (!regex.test(value)) {
					uni.showToast({
						title: '请输入有效的数字，最多保留两位小数',
						icon: 'none'
					});
					this.psw = '';
				}
			},
			login() {
				uni.navigateTo({
					url: "/pages/sys/login/index"
				})
			},
			getusercenter() {
				this.$u.api
					.usercenter()
					.then((res) => {
						console.log(res, 899)
						if (res.code == 1) {
							this.walletinfo = res?.data
						}
					});
			},
			//授权手机号登录
			decryptPhoneNumber(e) {

				console.log(e, 3333)
				var that = this
				// #ifdef MP-WEIXIN
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					if (e.detail.iv) {

						let {
							code,
							encryptedData,
							iv
						} = e.detail

						that.$u.api
							.updateusermobile({

								encrypted_data: encryptedData,
								iv
							})
							.then((res) => {

								this.getuserinfo()
							});

					} else {
						// 授权失败请使用验证码登录

						uni.showToast({
							title: '请使用手机号登录',
							icon: 'none'
						});
					}
				}
				// #endif
			},
			getuserinfo() {
				this.sendDate =false;
				this.$u.api
					.userinfo()
					.then((res) => {
						this.sendDate =true;
						this.info = res?.data
						
						this.$u.vuex("vuex_srls_isvip", res?.data?.isvip);
						this.$u.vuex("vuex_user", res?.data);
						// 模拟写死
						// this.info.isvip = 1;
					});
			},
			navTo(url, type) {
				if (!type) {
					if (this.vuex_srls_token) {
						
						
						uni.navigateTo({
							url: url
						});
						
						// if(url=='share'){
						// 	if(this.vuex_srls_isvip==1){
						// 		uni.navigateTo({
						// 			url: url
						// 		});
						// 	}else{
						// 		uni.showToast({
						// 			title: '会员才可分享',
						// 			icon: 'none'
						// 		});
						// 	}
						// }else{
						// 	uni.navigateTo({
						// 		url: url
						// 	});
						// }
						
					} else {
						uni.navigateTo({
							url: "/pages/sys/login/index"
						})
					}
				} else {
					uni.navigateTo({
						url: url
					});
				}


			},
			sure() {

				if (!this.realName) {
					uni.showToast({
						title: '请输入您的真实姓名',
						icon: 'none'
					});
					return
				}


				const value = this.psw;
				const regex = /^\d+(\.\d{1,2})?$/;
				if (!regex.test(value)) {
					uni.showToast({
						title: '请输入有效的数字，最多保留两位小数',
						icon: 'none'
					});
					this.psw = '';
					return
				}
				
				if (parseFloat(this.psw)>parseFloat(this.walletinfo.withdrawalmoney)) {
					uni.showToast({
						title: '不可大于最大可提现金额',
						icon: 'none'
					});
					return
				}
				if (parseFloat(this.psw)>200) {
					uni.showToast({
						title: '单笔提现金额不能超过200元',
						icon: 'none'
					});
					return
				}
				
				
				
				
				


				this.$u.api
					.WithdrawApply({
						user_id: this.info.id,
						money: this.psw,
						remark: '微信余额提现',
						real_name: this.realName
					})
					.then((res) => {
						console.log(res,8888)
						if(res.code==1){
							uni.showToast({
								title:res.msg,
								icon: 'none'
							});
							this.show = false
							this.getuserinfo()
							this.getusercenter()
						}else{
							uni.showToast({
								title:res.msg,
								icon: 'none'
							});
						}
					});


			},
			detail(url, type) {
				if (this.vuex_srls_token) {
					console.log(33333)
					if (type == 2) {
						this.psw='';
						this.show = true
					} else {
						uni.navigateTo({
							url: url + '?type=' + type
						});
					}
				} else {
					uni.navigateTo({
						url: "/pages/sys/login/index"
					})

				}
			}
		}
	};
</script>
<style lang="scss">
	@import 'index.scss';

	page {
		background: #F8F8F8;
	}

	.btns2 {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		// background: red;
		opacity: 0;

	}

	/deep/ .u-mode-center-box {
		margin-top: 40px !important;
	}

	.content {
		width: 100%;
		// 

		.img {
			display: flex;
			justify-content: flex-end;

			.close {
				width: 22px;
				height: 22px;
				text-align: right;
				margin:10px;
			}
		}

		.tips {
			padding: 30rpx 0 0;
			color: #999;
			text-align: center;
		}

		.title {
			text-align: center;
			padding: 0 0 18px 0;
			font-weight: bold;
			font-size: 17px;
		}

		.main {
			background: #fff;
			width: 90%;
			margin: 0 auto;
			padding-bottom: 30px;
			// height: 100px;
			border-radius: 5px;

			/deep/ .u-input {
				width: 100% !important;
			}

			.desc {
				padding: 0 15px;
				margin-bottom: 10px;
				font-size: 13px;
				color: #626262;
				display: flex;
				align-items: center;
				justify-content: space-between;
				


				image {
					width: 20px;
					height: 20px;
					border-radius: 50%;
					margin-right: 5px;
				}

				.line {
					display: flex;
					align-items: center;
				}
			}

			.btn {
				margin: 20px 15px 0;
				border-radius: 5px;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #3ec068;
				color: #fff;
			}

			.subtit {
				color: #3ec068;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 25px 0 10px 0;
				font-size: 13px;

				.wx {
					width: 15px;
					height: 15px;
					margin-right: 5px;
					margin-top: 2px;
				}
			}

			.money {
				font-size: 40px;
				padding-bottom: 30px;
				font-weight: bold;
				color: #262626;
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-size: 20px;
					padding-right: 5px;
				}
			}
		}

	}


	.getPhone {
		position: fixed;
		bottom: 20rpx;
		left: 20rpx;
		right: 20rpx;
		background: rgba(0, 0, 0, .5);
		border-radius: 16rpx;
		padding: 14rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;

		.butgroup {
			// width: 100rpx;
			// height: 50rpx;
		}
	}

	.getPhone /deep/ button {
		height: 50rpx;
		line-height: 50rpx;
		background: #0fbcae !important;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		border-radius: 40rpx;
	}

	.wrap .u-cell-box .u-cell_title {
		color: #202328;
	}

	.sign-in-images {
		width: 125rpx;
		height: 50rpx;
		position: absolute;
		right: 0;
		top: 5px;

		uni-image {
			width: 125rpx;
			height: 50rpx;
		}
	}
</style>